<template>
  <div class="app-container">
    <div class="table-layout">
      <el-row>
        <el-col :span="4" class="table-cell-title">名称</el-col>
        <el-col :span="4" class="table-cell-title">优惠券类型</el-col>
        <el-col :span="4" class="table-cell-title">可使用商品</el-col>
        <el-col :span="4" class="table-cell-title">使用门槛</el-col>
        <el-col :span="4" class="table-cell-title">面值</el-col>
        <el-col :span="4" class="table-cell-title">状态</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell">{{ coupon.name }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.type && COUPON_TYPE_DICT[coupon.type] }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.useType && COUPON_AREA_DICT[coupon.useType] }}</el-col>
        <el-col :span="4" class="table-cell">满{{ coupon.minPoint }}元可用</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.amount }}元</el-col>
        <el-col :span="4" class="table-cell">{{ formatStatus(coupon.endTime) }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell-title">有效期</el-col>
        <el-col :span="4" class="table-cell-title">总发行量</el-col>
        <el-col :span="4" class="table-cell-title">已领取</el-col>
        <el-col :span="4" class="table-cell-title">待领取</el-col>
        <el-col :span="4" class="table-cell-title">已使用</el-col>
        <el-col :span="4" class="table-cell-title">未使用</el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="table-cell" style="font-size: 13px">
          {{ formatDate(coupon.startTime) }}~{{ formatDate(coupon.endTime) }}
        </el-col>
        <el-col :span="4" class="table-cell">{{ coupon.publishCount }}</el-col>
        <el-col :span="4" class="table-cell">{{ coupon.receiveCount }}</el-col>
        <el-col :span="4" class="table-cell">
          {{ quantityClaimed(coupon) }}
        </el-col>
        <el-col :span="4" class="table-cell">{{ coupon.useCount }}</el-col>
        <el-col :span="4" class="table-cell">{{ useRemainingQuantity(coupon) }}</el-col>
      </el-row>
    </div>
    <el-form :inline="true" style="margin-top: 20px" :model="listQuery" size="small" label-width="100px">
      <el-form-item label="使用状态：">
        <el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
          <el-option v-for="item in COUPON_STATUS_MAP" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号：">
        <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearchList" size="small"> 搜索 </el-button>
        <el-button @click="handleResetSearch" size="small"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <div class="table-container">
      <el-table ref="couponHistoryTable" height="100%" :data="list" style="width: 100%" v-loading="listLoading" border>
        <el-table-column label="优惠码" width="160" align="center">
          <template #default="scope">{{ scope.row.couponCode }}</template>
        </el-table-column>
        <el-table-column label="领取会员" width="140" align="center">
          <template #default="scope">{{ scope.row.memberNickname }}</template>
        </el-table-column>
        <el-table-column label="领取方式" width="100" align="center">
          <template #default="scope">{{ formatGetType(scope.row.getType) }}</template>
        </el-table-column>
        <el-table-column label="领取时间" width="160" align="center">
          <template #default="scope">{{ formatDateTime(scope.row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="当前状态" width="140" align="center">
          <template #default="scope">
            {{ COUPON_STATUS_DICT[scope.row.useStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="使用时间" width="160" align="center">
          <template #default="scope">{{ formatDateTime(scope.row.useTime) }}</template>
        </el-table-column>
        <el-table-column label="订单编号" align="center">
          <template #default="scope">
            {{ scope.row.orderSn === null ? 'N/A' : scope.row.orderSn }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        v-model:current-page="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getCoupon } from '@/api/coupon'
import { fetchList as fetchCouponHistoryList } from '@/api/couponHistory'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { COUPON_STATUS_MAP, COUPON_TYPE_DICT, COUPON_AREA_DICT, COUPON_STATUS_DICT } from '@/constant'
import { formatDateTime, formatDate } from '@/utils/format'
import type { CouponDto, CouponHistory, CouponHistoryPageDto } from '@/models/coupon'
import BigNumber from 'bignumber.js'

defineOptions({ name: 'CouponHistoryList' })
const route = useRoute()
const coupon = ref<CouponDto>({ productCategoryRelationList: [], productRelationList: [] })
const listQuery = ref<CouponHistoryPageDto>({ pageNum: 1, pageSize: 10 })
const list = ref<CouponHistory[]>([])
const total = ref(0)
const listLoading = ref(false)
onMounted(async () => {
  listQuery.value.couponId = Number(route.query.id)
  const response = await getCoupon(listQuery.value.couponId)
  coupon.value = response.data.data
  getList()
})

const formatStatus = (endTime: any) => (Number(endTime) > new Date().getTime() ? '未过期' : '已过期')
const formatGetType = (type: number) => (type === 1 ? '主动获取' : '后台赠送')
const quantityClaimed = (coupon: CouponDto) => new BigNumber(Number(coupon.publishCount || 0)).minus(Number(coupon.receiveCount)).toNumber()
const useRemainingQuantity = (coupon: CouponDto) =>
  new BigNumber(Number(coupon.publishCount || 0)).minus(Number(coupon.useCount)).toNumber()

async function getList() {
  listLoading.value = true
  const response = await fetchCouponHistoryList(listQuery.value)
  listLoading.value = false
  list.value = response.data.data.list
  total.value = response.data.data.total
}
function handleResetSearch() {
  listQuery.value = { pageNum: 1, pageSize: 10 }
  listQuery.value.couponId = Number(route.query.id)
}
function handleSearchList() {
  listQuery.value.pageNum = 1
  getList()
}
function handleSizeChange(val: number) {
  listQuery.value.pageNum = 1
  listQuery.value.pageSize = val
  getList()
}
function handleCurrentChange(val: number) {
  listQuery.value.pageNum = val
  getList()
}
</script>
<style scoped>
.app-container {
  width: 80%;
  margin: 20px auto;
}

.filter-container {
  margin-top: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
